import React, {useEffect, useImperativeHandle} from 'react';
import {DatePicker, Field, Form, Input, Switch} from '@alifd/next';
import moment from 'moment';
import {datetimeStamp2String} from '@/utils/locale';

const FormItem = Form.Item;

export type ActionType = 'add' | 'edit' | 'preview';

const formItemLayout = {
  labelCol: {span: 4},
  wrapperCol: {span: 20}
};

export interface OperaitionProps {
  /**
   * 操作类型, 以此来标识是添加、编辑、还是查看
   */
  actionType: ActionType;

  /**
   * 数据源
   */
  dataSource: any;
}

export interface OperationRef {
  getValues(callback: (vals: object) => void): void;
}

const Operation: React.ForwardRefRenderFunction<OperationRef, OperaitionProps> = (props, ref) => {
  const {
    actionType, onOk = () => {
    }
  } = props;
  onOk();
  const dataSource = props.dataSource || {};
  const field = Field.useField([]);

  useEffect(() => {
    field.reset();
    if (dataSource) {
      // console.log(dataSource);
      const newValues = {
        ...dataSource
      };
      field.setValues(newValues);
    }
  }, [field, dataSource]);
  useImperativeHandle<OperationRef, OperationRef>(
    ref,
    () => {
      return {
        getValues(callback: (vals: object) => void) {
          field.validate((errors, values): void => {
            if (errors) {
              return;
            }
            callback(values);
          })
        }
      };
    }
  );
  const castGmtCreat = (...args: any[]) => {
    const arg = args[0];
    if (arg) {
      return datetimeStamp2String(arg);
    } else {
      return '';
    }
  }
  const isPreview = actionType === 'preview';
  return (
    <>
      <Form
        isPreview={isPreview}
        fullWidth
        labelAlign={isPreview ? 'left' : 'top'}
        field={field}
        {...formItemLayout}
      >
        <FormItem
          label="id:"
          required={!isPreview}
          requiredMessage="必填"
        >
          <Input
            disabled
            {...field.init('id')}
          />
        </FormItem>

        <FormItem
          label="放映厅名称:"
          required={!isPreview}
          requiredMessage="必填"
        >
          <Input
            name="name"
          />
        </FormItem>

        <FormItem
          label="所属电影院ID:"
          required={!isPreview}
          requiredMessage="必填"
        >
          <Input
            name="mcId"
          />
        </FormItem>

        {/* <FormItem
          label="是否使用:"
          required={!isPreview}
          requiredMessage="必填"
        >
          <Switch defaultChecked  name="inUse"  size="medium" />
        </FormItem> */}
        <FormItem
          label="放映厅最大人数:"
          required={!isPreview}
          requiredMessage="必填"
        >
          <Input
            name="maxCount"
          />
        </FormItem>
        {/* <FormItem
          label="可见时间:"
          required={!isPreview}
          requiredMessage="必填"
        >
          <DatePicker name="date" showTime/>
          </FormItem> */}
          
          {/* <DatePicker name="date" defaultValue={moment(dataSource.date)}/> */}
          {/* <Input
            name="date"
          /> */}
      
      </Form>
    </>
  );
}

export default React.forwardRef(Operation);
